<template>
  <div class="main-content beauty-scrollbar">
    <router-view v-if="webviewType == '1'" :key="$route.path"></router-view>
    <ep-app-layout v-else>
      <keep-alive :exclude="excludeRoute" :include="includeRoute" :max="15">
        <!-- * 对 keep-alive 做过处理,架子中以 路由的 [Path] 作为缓存标志, 即: /#/multiPageDemo/1?name=ep,缓存标志位为/#/multiPageDemo/1 -->
        <router-view v-if="getUUID()" :key="getKey()"></router-view>
      </keep-alive>
    </ep-app-layout>
  </div>
</template>

<script>
import epAppLayout from '@/layout'
export default {
  name: 'main-content',
  components: {
    epAppLayout
  },
  data() {
    return {
      excludeRoute: []
    }
  },
  created() {
    if (this.$route.query.webview) {
      this.$store.commit('app/SETWEBVIEWTYPE', this.$route.query.webview)
    }
  },
  methods: {
    getUUID() {
      let path = this.$route.path
      // #EPFC-microapp-start
      let microApp = this.$route.matched.find(v => v.meta.microApp)
      if (microApp) {
        path = microApp.path
      }
      // #EPFC-microapp-end
      let item = this.routeKeepAlive.find(v => v.key === path)
      return (item && item.uuid) || ''
    },
    getKey() {
      return this.getUUID() + this.$route.path
    }
  },

  computed: {
    routeKeepAlive() {
      return this.$store.state.app.routeKeepAlive
    },
    includeRoute() {
      return this.routeKeepAlive.filter(v => v.keepAlive).map(v => v.route.path)
    },
    webviewType() {
      return this.$store.state.app.webviewType
    },
    isInIframe() {
      return this.$store.state.app.isInIFrame
    }
  }
}
</script>

<style lang="less">
@import '~@/styles/vars';
.main-content {
  // height: 100%;
  background: @color-light-background;
}
</style>
